<!doctype html>
<html>
<head>
  <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
  <script src="../bower_components/angular/angular.min.js"></script>
  <script src="../bower_components/zeroclipboard/dist/ZeroClipboard.min.js"></script>
  <script src="../src/ngClip.js"></script>
</head>
<body>

<div ng-app="myapp">
  <div class="container" ng-controller="myctrl">

    <div class="page-header">
      <h1>ngClip <small>example</small></h1>
    </div>

    <form>
      <div class="form-group">
        <label >Copy #1</label>
        <input type="text" class="form-control" placeholder="Enter text to copy" ng-model="copy1">
      </div>
      <button class="btn btn-default" clip-copy="copy1">Copy!</button>

      <br/><br/><br/>

      <div class="form-group">
        <label >Copy #2 with fallback for users without flash</label>
        <p>Try disabling flash to see a graceful fallback</p>
        <input type="text" class="form-control" placeholder="Enter text to copy" ng-model="copy2">
      </div>
      <button class="btn btn-default" clip-copy="copy2" clip-click-fallback="fallback(copy)">Copy!</button>

      <br/><br/><br/>

      <div class="form-group">
        <label >Copy #3 with with clip-click</label>
        <input type="text" class="form-control" placeholder="Enter text to copy" ng-model="copy3">
      </div>
      <button class="btn btn-default" clip-copy="copy3" clip-click="showMessage()">Copy!</button>

      <br/><br/><br/>

      <textarea class="form-control" rows="3" placeholder="paste here"></textarea>
    </form>
  </div>
</div>

<script>
  var myapp = angular.module('myapp', ["ngClipboard"]);

  myapp.config(['ngClipProvider', function(ngClipProvider) {
    ngClipProvider.setPath("../bower_components/zeroclipboard/dist/ZeroClipboard.swf");
  }]);

  myapp.controller('myctrl', function ($scope) {
    $scope.fallback = function(copy) {
      window.prompt('Press cmd+c to copy the text below.', copy);
    };

    $scope.showMessage = function() {
      console.log("clip-click works!");
    };
  });
</script>

</body  >
</html>
